<template>
	<view class="message-search">
		<view class="message-input">
			<uni-icons type="search" size="20" color="#E0E0E0"></uni-icons>
			<input class="search" v-model.trim="searchValue" @input="e => searchInput('1',e)"
				placeholder="多条件搜索请用空格间隔" />
			<view class="button-rigth" @click="searchInput('2')">
				搜索
			</view>
		</view>
		<!-- 项目 -->
		<view class="project-materials">
			<view class="head-whole" @click="clickMateria('1')">
				<view class="name-td">待办项目</view>
				<view class="whole-text">
					<text>全部({{ agencyTotal }})</text>
					<uni-icons type="right" size="16" color="#a8a8a8" />
				</view>
			</view>

			<!-- 待办项目 -->
			<view class="back-padding">
				<view :style="{backgroundImage: 'url('+item.backImageUrl + ')'}" class="data-forModle"
					v-for="(item,index) in agencyList" :key="item.id">
					<view class="theme-flex">
						<fileImage :src="item.coverPicUrl" :className="['theme-image']" />
						<!-- 检备修项目列表 -->
						<view class="theme-rigth" v-if="item.isEpoxy==false">
							<view class="name-text">
								<text style="margin-left: 20rpx;">{{ item.prjName || '' }}</text>
							</view>
							<view class="name-text name-text-rigth">
								<text class="name-value">{{ item.prjCode }}</text>
							</view>
							<view class="name-text name-text-rigth">
								<text class="name-value">{{ item.serviceSeller }}</text>
							</view>
							<view class="name-text name-text-rigth">
								<text class="name-value"><text
										class="textTitle">提交时间：</text>{{ item.createTime?item.createTime.replace('T',' ').slice(0,10):'' }}</text>
							</view>
						</view>
						<!-- 环氧签收项目列表 -->
						<view class="theme-rigth" v-if="item.isEpoxy==true">
							<view style="margin-left: 20rpx;">
								<text>{{ item.epPrjName|| '' }}</text>
							</view>
							<view class="name-text name-text-rigth">
								<text>{{ item.planCode|| '' }}</text>
							</view>
							<view class="name-text name-text-rigth">
								<text class="name-value"><text
										class="textTitle">服务方:</text>{{ item.serviceSeller }}</text>
							</view>
							<view class="name-text name-text-rigth">
								<text class="name-value"><text
										class="textTitle">提交时间:</text>{{ item.createTime?item.createTime.replace('T',' ').slice(0,16):'' }}</text>
							</view>
						</view>

					</view>
					<view class="button-list">
						<button class="button-public" @click="clickAtla(item)">项目图集</button>
						<button class="button-public" @click="clickDateil(item)">项目详情</button>
						<button v-if="item.status == 0" class="button-public button-public-active"
							@click="clickConfirm(item)">
							{{ item.interactivityType == 1 ? '去签收':'方案' }}
						</button>
					</view>
				</view>
				<view class="no-data-show" v-show="agencyShow">
					没有更多了···
				</view>
			</view>





		</view>
		<!-- 消息 -->
		<view class="project-materials">
			<view class="head-whole" @click="clickMateria('2')">
				<view class="name-td">消息</view>
				<view class="whole-text">
					<text>全部({{ messageTotal }})</text>
					<uni-icons type="right" size="16" color="#a8a8a8" />
				</view>
			</view>

			<view class="message-cation">
				<view class="notifi-cation" v-for="(item,index) in messageList" :key="item.id"
					@click="clickReversal(item,index)">
					<!-- <view class="image-cation" :class="{'image-cation-active': item.readed == '0' }">
						<image src="/static/u2329.png" mode="widthFix" />
					</view> -->



					<view class="head-text">
						<view class="head-top">
							<!-- 标题 -->
							<view class="titleSuer">
								<image v-if="item.readed==0" src="http://106.14.56.171:15016/images/images/messige.png"
									mode="" />
								<image v-if="item.readed!=0"
									src="http://106.14.56.171:15016/images/epoxyPouringImages/messige.png" mode="" />

								<text class="font-size" style="margin-left: 20rpx;">{{ item.noticeTitle }}</text>
							</view>
							<text>{{ item.noticeTime ?item.noticeTime.replace('T',' ').slice(0,10):''}}</text>
						</view>


						<!-- 消息内容 -->
						<view class="content-bottom">
							{{ item.noticeContent }}
						</view>
					</view>
				</view>
				<view class="no-data-show" v-show="messageShow">
					没有更多了···
				</view>
			</view>




		</view>
		<!-- 公告 -->
		<view class="project-materials">
			<view class="head-whole" @click="clickMateria('3')">
				<view class="name-td">公告</view>
				<view class="whole-text">
					<text>全部({{ noticeTotal }})</text>
					<uni-icons type="right" size="16" color="#a8a8a8" />
				</view>
			</view>
			<view class="message-cation">
				<view class="notifi-cation" v-for="(item,index) in noticeList" :key="item.id"
					@click="clickNotice(item,index)">
					<view class="head-text">
						<view class="head-top">
							<view class="titleSuer">
								<image v-if="item.isRead==0" src="http://106.14.56.171:15016/images/images/messige.png"
									mode="" />
								<image v-if="item.isRead!=0"
									src="http://106.14.56.171:15016/images/epoxyPouringImages/messige.png" mode="" />
								<text class="font-size" style="margin-left: 20rpx;">{{ item.title }}</text>
							</view>
							<text>{{ item.pushTime?item.pushTime.replace('T',' ').slice(0,10):'' }}</text>
						</view>
						<!-- 公告内容 -->
						<view class="content-bottom">
							{{ item.content }}
						</view>
					</view>
				</view>
				<view class="no-data-show" v-show="noticeShow">
					没有更多了···
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import fileImage from '@/components/fileImage/fileImage.vue'
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			fileImage
		},
		data() {
			return {
				typeList: ['http://106.14.56.171:15016/images/messageicon/u3041.png',
					'http://106.14.56.171:15016/images/messageicon/u3039.png'
				],
				agency: {
					pageNo: 1, // 页码
					pageSize: 6, // 条数
					companyName: '', // 公司名称
				}, // 待办接口数据
				message: {
					pageNo: 1, // 页码
					pageSize: 6, // 条数
				}, // 消息接口数据
				searchValue: '', // 搜索条件
				agencyList: [], // 待办项目数据
				agencyTotal: 0, // 待办项目总数据
				agencyShow: true, // 待办项目无数据
				messageList: [], // 消息数据
				messageTotal: 0, // 消息总数据
				messageShow: true, // 消息无数据
				noticeList: [], // 公告数据
				noticeTotal: 0, // 公告总数据
				noticeShow: true, // 公告无数据
				disabled: false, // 防止重复点击
			};
		},
		onLoad() {
			this.agency.companyName = this.userInfo.corpName
			this.agencyMatter()
			this.messageAction()
			this.noticeAction()
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			/**
			 * 时间： 2022/8/2，An
			 * 功能： 获取待办事项
			 * 接口:  'api/Agenda/GetAgendaList'，
			 * 参数： ...this.agency,this.searchValue
			 */
			agencyMatter() {
				this.$http.post('api/Agenda/GetAgendaList', {
					...this.agency,
					searchValue: this.searchValue
				}).then(res => {
					if (Array.isArray(res.items)) {
						res.items = res.items.map(code => {
							let CodeUrl = code.interactivityType
							return {
								...code,
								backImageUrl: CodeUrl == 1 ? this.typeList[1] : CodeUrl == 2 ? this
									.typeList[0] : ''
							}
						})
						this.agencyList = res.items
						console.log('------------------', this.agencyList);
						this.agencyTotal = res.totalCount
						this.agencyShow = res.items.length <= 0 ? true : false
					}
				})
			},
			/**
			 * 时间： 2022/8/2，An
			 * 功能： 消息列表
			 * 接口:  'api/Message/GetMessageList'，
			 * 参数： ...this.message,this.searchValue
			 */
			messageAction() {
				this.$http.post('api/Message/GetMessageList', {
					...this.message,
					searchValue: this.searchValue
				}).then(res => {
					if (Array.isArray(res.items)) {
						this.messageList = res.items
						this.messageTotal = res.totalCount
						this.messageShow = res.items.length <= 0 ? true : false
					}
				})
			},
			/**
			 * 时间： 2022/8/2，An
			 * 功能： 公告列表
			 * 接口:  'api/Notice/GetNoticeList'，
			 * 参数： ...this.message,this.searchValue
			 */
			noticeAction() {
				this.$http.post('api/Notice/GetNoticeList', {
					...this.notice,
					searchValue: this.searchValue
				}).then(res => {
					if (Array.isArray(res.items)) {
						this.noticeList = res.items
						this.noticeTotal = res.totalCount
						this.noticeShow = res.items.length <= 0 ? true : false
					}
				})
			},
			/**
			 * 时间： 2022/8/2，An
			 * 功能： 消息读取
			 * 接口:  'api/Message/ReadMessage'
			 * 参数： messageIdList-->[0,1],消息id,可批量
			 */
			readMessage(data, item, index) {
				this.$http.post('api/Message/ReadMessage', data).then(res => {
					let messObj = {
						...item,
						readed: 1
					}
					this.messageList.splice(index, 1, messObj)
					this.disabled = false
				}).catch(err => {
					this.disabled = false
				})
			},
			/**
			 * 时间： 2022/8/2，An
			 * 功能： 公告读取
			 * 接口:  'api/Notice/ReadNotice'
			 * 参数： noticeIdList-->[0,1],消息id,可批量
			 */
			noticeMessage(data, item, index) {
				this.$http.post('api/Notice/ReadNotice', data).then(res => {
					let messObj = {
						...item,
						isRead: true
					}
					this.noticeList.splice(index, 1, messObj)
					this.disabled = false
				}).catch(err => {
					this.disabled = false
				})
			},
			// 项目图集
			clickAtla(item) {
				uni.navigateTo({
					url: `/pages/project/project_img/project_album?id=${item.prjInfoId}`,
				});
			},
			// 项目详情
			clickDateil(item) {
				uni.navigateTo({
					url: `/pages/project/project_detail/project_detail?id=${item.prjInfoId}`,
				});
			},
			// 去确认
			clickConfirm(item) {
				uni.navigateTo({
					url: `/pages/message/message_backlog/backlog_webView?url=${item.filePath}&id=${item.prjInfoId}`,
				});
			},
			// 输入框或者点击搜索
			searchInput(code, item) {
				switch (code) {
					// 输入框
					case '1':
						let {
							value
						} = item.detail
						if (value == '') {
							this.init()
						}
						break;
						// 搜索
					case '2':
						this.init()
						this.agencyMatter()
						this.messageAction()
						this.noticeAction()
						break;
						// 其他
					default:
						uni.showToast({
							title: '没有此类型！',
							icon: 'none'
						})
				}
			},
			// 点击消息设置为已读
			clickReversal(item, index) {
				uni.navigateTo({
					url: `/pages/message/message_msg/message_detail?item=${JSON.stringify(item)}`
				});
				// readed 1 是已读 0 是未读
				if (item.readed == '1') return
				if (this.disabled) {
					uni.showToast({
						title: '请勿重复点击！',
						icon: 'none'
					})
				}
				this.disabled = true
				var listCode = {
					messageIdList: [item.id]
				}
				this.readMessage(listCode, item, index)
			},
			// 点击公告设置为已读
			clickNotice(item, index) {
				console.log(item)
				uni.navigateTo({
					url: `/pages/message/message_notice/message_notice_detail?item=${JSON.stringify(item)}`
				});
				// isRead true 是已读  false是未读
				if (item.isRead) return
				if (this.disabled) {
					uni.showToast({
						title: '请勿重复点击！',
						icon: 'none'
					})
				}
				this.disabled = true
				var listCode = {
					noticeIdList: [item.id]
				}
				this.noticeMessage(listCode, item, index)
			},
			// 去项目或者材料跳转
			clickMateria(code) {
				switch (code) {
					// 待办项目
					case '1':
						uni.navigateTo({
							url: '/pages/message/message_backlog/message_backlog'
						})
						break;
						// 消息
					case '2':
						uni.navigateTo({
							url: '/pages/message/message_msg/message_msglist'
						})
						break;
						// 公告
					case '3':
						uni.navigateTo({
							url: '/pages/message/message_notice/message_notice'
						})
						break;
						// 其他
					default:
						uni.showToast({
							title: '没有此类型！',
							icon: 'none'
						})
				}
			},
			// 初始化数据
			init() {
				this.messageList = []
				this.messageShow = true
				this.messageTotal = 0
				this.noticeList = []
				this.noticeShow = true
				this.noticeTotal = 0
				this.agencyList = []
				this.agencyShow = true
				this.noticeTotal = 0
			}
		}
	}
</script>

<style lang="less" scoped>
	.textTitle {
		color: #adadad;
	}

	.message-search {
		margin: 20rpx;

		.message-input {
			display: flex;
			padding: 4rpx 0 4rpx 10rpx;
			border: 2rpx solid #fff;
			border-radius: 40rpx;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			// border: 1px solid #fff;
			color: #8f8f8f;

			>text {
				margin-left: 20rpx;
				font-size: 14px;
			}

			.search {
				width: 80%;
				padding: 0 20rpx;
				color: #8f8f8f;
				font-size: 14px;
			}

			.button-rigth {
				padding: 15rpx 25rpx;
				border-radius: 0 20rpx 20rpx 0;
				cursor: pointer;
				width: 80rpx;
				color: #8f8f8f;
				font-size: 14px;
			}

			// .button-rigth:hover{
			// 	color: #666;
			// }
		}

		.no-data-show {
			border-radius: 20rpx;
			background-color: #fff;
			padding: 20rpx 0;
			text-align: center;
			color: #9e9e9e;
		}

		.back-padding {
			.data-forModle {
				padding: 10rpx;
				background-color: #fff;
				border-radius: 20rpx;
				background-repeat: no-repeat;
				background-size: 100rpx 88rpx;
				background-position: right top;
			}

			.data-forModle+.data-forModle {
				margin-top: 10rpx;
			}

			.button-list {
				display: flex;
				justify-content: flex-end;
				margin: 10rpx 0;

				.button-public {
					font-size: 28rpx;
					margin: 0;
					border-radius: 48rpx;
					border: 2rpx solid #9e9e9e;
					padding: 10rpx 20rpx;
					line-height: normal;
					background-color: #fff;
				}

				.button-public::after {
					border: none;
				}

				.button-public-active {
					color: #b6001f;
				}

				.button-public+.button-public {
					margin-left: 10rpx;
				}
			}

			.theme-flex {
				display: flex;
				margin-top: 10rpx;
				// background-color: aqua;

				.theme-rigth {
					width: 100%;
					flex: 1;
					// background-color: cadetblue;

					.name-text {
						font-size: 30rpx;
						margin-bottom: 5rpx;
						font-weight: bold;
					}

					.name-text-rigth {
						font-weight: 100;
						font-size: 28rpx;
						margin-left: 20rpx;
					}
				}
			}
		}

		.project-materials {
			margin: 20rpx 0;

			.head-whole {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 10rpx 0;

				.name-td {
					color: #b6001f;
					font-size: 30rpx;
					font-weight: bold;
					position: relative;
					padding-left: 20rpx;
				}

				.whole-text {
					font-size: 30rpx;
					color: #a8a8a8;

					text {
						padding-right: 10rpx;
					}
				}

				.name-td::after {
					content: '';
					position: absolute;
					background-color: #b6001f;
					left: 0;
					top: 12rpx;
					width: 6rpx;
					height: 26rpx;
					border-radius: 20rpx;
				}
			}
		}

		.message-cation {
			border-radius: 20rpx;
			background-color: #fff;
			padding: 20rpx;

			.notifi-cation {
				display: flex;
				margin-top: 20rpx;

				.image-cation {
					border-radius: 50%;
					border: 2rpx solid #ccc;
					width: 100rpx;
					height: 100rpx;
					display: inline-block;
					vertical-align: middle;
					line-height: 100rpx;
					text-align: center;
					margin-right: 10rpx;
					position: relative;

					image {
						width: 50rpx;
						height: 50rpx;
						vertical-align: middle;
					}
				}

				.image-cation-active::after {
					content: '';
					width: 15rpx;
					height: 15rpx;
					border-radius: 50%;
					background-color: red;
					position: absolute;
					top: 4rpx;
				}

				.head-text {
					flex: 1;
					width: 70%;
					padding: 0 10rpx;
					// background-color: aqua;
					// display: flex;
					// flex-direction: row;
					// justify-content: space-around;
					// align-items: center;

					.head-top {
						display: flex;
						justify-content: space-between;
						font-size: 26rpx;

						.titleSuer {
							display: flex;
							// flex-direction: row;
							align-items: center;

							// justify-content: space-around;
							>image {
								width: 45rpx;
								height: 45rpx;
							}

						}



						.font-size {
							font-size: 27rpx;
							font-weight: bold;
						}
					}
				}
			}

			.notifi-cation+.notifi-cation {
				padding-top: 10rpx;
				border-top: 2rpx solid #f5f5f5;
			}
		}

		.uni-input-placeholder {
			font-size: 12px;
		}
	}

	.content-bottom {
		margin-top: 25rpx;
		font-size: 22rpx;
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		// background-color: #04be02;
	}
</style>
<style lang="scss">
	.theme-image {
		height: 160rpx;
		width: 160rpx;
		margin-right: 10rpx;
		border-radius: 20rpx;
	}
</style>
